#border {
    border-width: 5px;
    /* 点状边框； */
    /* border: 1px dashed black; */
    /* border: 1px groove gainsboro; */
    /* border: 1px ridge black; */
    /* border: 1px inset gainsboro; */
    /* border: 1px outset gainsboro; */
    /* 只有左边框设置了样式 */
    /* border-left: 1px inset black; */
    /* border-style: none hidden; */
    border-style: dotted solid dashed;
    border-radius: 5px;
    /* 不管使用了border-color,还是border-width,都需要先进行border-style的设置； */
    /* border-style: dotted;  */
}

#margin{
    border: 1px solid black;
    /* 如果要设置margin:auto的话，一定要设置他的宽度为，width,否则margin:auto居中的效果就不会显示出来； */
    /* 将margin 属性设置为auto,以使元素在其容器中水平居中。然后，该元素占定指定宽度，并且在剩余空间将左右边界之间平均分配； */
    margin: auto;
    width: 100px;
}

/* 给页面定义外边距 内边距的时候，要先把原来的内外边距给去掉； */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

#padding-p {
    border: 1px solid red;
    width: 300px;
    padding: 30px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* 在css中，width和height是内容区域的宽度和高度。 */

#padding-div{
    border: 1px solid red;
    width: 300px;
    padding: 30px;
    /* box-sizing: border-box; */
}

#box {
    background-color: gray;
    border: 10px solid green;
    padding: 10px;
}